<template>
  <div class="boxmr">
    <div class="l">
      <div class="one">Weekly active people</div>
      <div class="two">{{ getfg(`${countdata}`) }}</div>
    </div>
    <div class="mt-fk"><div id="mt-fk"></div></div>
  </div>
</template>

<script setup lang="ts">
import { getfg } from "@/utile/fg";
import { onMounted, watch, ref } from "vue";
import themstore from "@/store/themctel/index";
const usethemstore = themstore();
import * as echarts from "echarts";
import { getuser } from "@/api/index";
const themcolor = ref<string>();
const themcolor2 = ref<string>();
const countdata = ref();
const dataaa = ref();

watch(
  () => usethemstore.chagethem,
  () => {
    setcharts();
  }
);
onMounted(() => {
  setcharts();
  getuserdata();
});
const getuserdata = async () => {
  const res = await getuser(9999, 1, "", "");
  if (res.code == 200) {
    console.log(res.data);
    countdata.value = res.data.count;
    const newdata = res.data.rows.map((i: any) => {
      return new Date(i.createdAt).getMonth() + 1;
    });
    const showdata = new Array(12).fill(0);
    newdata.forEach((i: any) => {
      showdata[i - 1]++;
    });
    dataaa.value = showdata;
    setcharts();
  }
};
const setcharts = () => {
  themcolor.value = getComputedStyle(document.documentElement).getPropertyValue(
    "--them-color"
  );
  themcolor2.value = getComputedStyle(
    document.documentElement
  ).getPropertyValue("--them-color2");
  const doms: HTMLDivElement = document.querySelector(
    "#mt-fk"
  ) as HTMLDivElement;
  const aa = echarts.init(doms);
  let option;

  option = {
    tooltip: {
      trigger: "axis",
    },
    grid: {
      top: "15%",
      left: "0",
      right: "0",
      bottom: "0",
      containLabel: true,
    },
    xAxis: {
      show: false,
      type: "category",
      data: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
      axisLabel: {
        color: "#CFCFCF",
        interval: 0,
        fontSize: 14,
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      show: false,
      type: "value",
      axisLabel: {
        show: true,
        color: "#CFCFCF",
        fontSize: 14,
      },

      splitLine: {
        show: true,
        lineStyle: {
          width: 0.8,
          color: "rgba(127, 214, 255, .4)",
          type: "dashed",
        },
      },
    },
    series: [
      {
        type: "line",
        showSymbol: false,
        smooth: true,
        // symbolSize: 8,
        lineStyle: {
          color: themcolor.value,
        },
        itemStyle: {
          color: "#00FFF6",
          borderColor: "#00FFF6",
          borderWidth: 2,
        },
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0.25,
                color: themcolor.value,
              },
              {
                offset: 1,
                color: themcolor2.value,
              },
            ],
          },
        },
        data: dataaa.value,
      },
    ],
  };

  aa.setOption(option);
};
</script>

<style scoped lang="scss">
.boxmr {
  height: 100%;
  width: 100%;
  padding: 10px;
  display: flex;
  .l {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    gap: 20px;
    overflow: hidden;

    .one {
      color: #a6a8ac;
      font-size: 0.7vw;
    }
    .two {
      font-size: 1.2vw;
      font-weight: 700;
      width: 150px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
    }
    .three {
      display: flex;
      gap: 5px;
      font-size: 0.65vw;
      color: #a6a8ac;

      .iconfont {
        color: var(--them-color);
        font-size: 0.7vw;
      }
    }
  }
  .mt-fk {
    height: 100%;
    width: 50%;
    border-radius: 10px;
    #mt-fk {
      height: 100%;
      width: 100%;
    }
  }
}
</style>
